<template>
	<div>
		<van-nav-bar :title="title">
			<template #left>
				<img @click="onClickLeft" src="@/assets/images/textbookSync/icon-back-black.png" width="9" height="18" />
			</template>
		</van-nav-bar>
		<div v-for="(item, index) in unitList" :key="index">
			<div class="cell" v-if="item.moduleName != '报听写'">
				<van-cell @click="selectCurrentUnit(item)" is-link>
					<!-- 使用 title 插槽来自定义标题 -->
					<template #title>
						<div class="custom-title">
							<!-- 报听写 -->
							<img v-if="item.moduleName === '报听写'" src="@/assets/images/textbookSync/video-purple.png"
								width="20">
							<img v-else src="@/assets/images/textbookSync/record.png" width="20">
							<span class="custom-title-text"> {{ item.resourceName }}</span>
						</div>
					</template>
					<template #label>
						<div class="custom-label">
							<!-- 目前假值 -->
							<div class="unit-state" type="primary" v-if="item.moduleName.includes('课文')">{{
                                item.moduleName }}</div>
							<div class="unit-state" type="green" v-if="item.moduleName.includes('报听写')">{{
                                item.moduleName }}</div>
							<div class="unit-state" type="warning" v-if="item.moduleName.includes('单词')">{{
                                item.moduleName }}</div>
						</div>
					</template>
				</van-cell>
			</div>
			<van-divider :style="{ padding: '5px 0px 0px 25px', margin: '0px' }" v-if="item.moduleName != '报听写'" />
		</div>
		<!-- 遮罩 -->
		<van-overlay :show="data.overlayShow" @click="data.overlayShow = false">
			<div class="wrapper" >
				<div class="circular-button-group">
					<div class="circular-button following" @click.stop="followReading('Follow')">跟读</div>
					<div class="circular-button read" @click.stop="followReading('Read')">朗读</div>
					<!-- <div class="circular-button recite" @click="following">背诵</div> -->
				</div>
			</div>
		</van-overlay>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		wordList
	} from "@/api/textbook";
	
	const router = useRouter()
	const route = useRoute()
	let unitList = ref([]) //单元列表
	let data = reactive({
		overlayShow: false,
		currentItem: {},
		readMode:'' //阅读模式跟读：Follow  朗读：Read
	})
	const title = decodeURI(route.query.title)
	//选中当前单元
	const selectCurrentUnit = (item) => {
		data.overlayShow = true
		data.currentItem = item
	}
	const followReading = (mode) => {
		if (data.currentItem.resourceType == 'a7527f97-14e6-44ef-bf73-3039033f128e') {
			router.push({
				path: '/homework/followWordH5',
				query: {
					versionId: data.currentItem.versionId,
					resourceFile: data.currentItem.resourceUrl,
					title: data.currentItem.resourceName,
					mode:mode,
					module: 'textbook_synchronization',
					moduleName:"单词"
				}
			})
		} else if (data.currentItem.resourceType == '992a5055-e9d0-453f-ab40-666b4d7030bb')  {
			router.push({
				path: '/homework/followTextH5',
				query: {
					versionId: data.currentItem.versionId,
					resourceFile: data.currentItem.resourceUrl,
					title: data.currentItem.resourceName,
					mode:mode,
					module: 'textbook_synchronization',
					moduleName:"课文"
				},
			
			})
		}else {
			showToast("功能模块未开发")
		}
	}
	const onClickLeft = () => {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			window.android.goBack();
		} else if (isiOS) {
			window.webkit.messageHandlers.back.postMessage("")
		}
	}
	//获取书籍单元列表 10065813506
	const getWordList = () => {
		wordList({
			id:route.query.id
		}).then((res) => {
			if (res.code == 1) {
				unitList.value = res.data
			}
		})
	}

	onMounted(() => {
		if (route.query.token) { //安卓ios跳转token放在路由上
			localStorage.setItem("h5-token", route.query.token);
		}
		getWordList()
	})
</script>

<style lang="scss" scoped>
	.cell {
		padding: 5px 0;
	}

	.custom-title {
		line-height: 22px;
		display: flex;
		/* justify-content: center; */
		align-items: center;
	}

	.custom-title-text {
		line-height: 22px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		margin-left: 5px;
	}

	.custom-label {
		margin: 10px 0px 0px 25px;

		.custom-label-unit {
			margin-left: 15px;
		}
	}

	.unit-state {
		display: inline-block;
		padding: 0 10px;
		background: #FFF2E2;
		color: #FF9917;
		border-radius: 6px;
		transform: skewX(349deg);
		height: 22px;
		line-height: 22px;
		font-size: 12px;

		&[type=primary] {
			background: #E2F2FF;
			color: #0287FD;
		}

		&[type=warning] {
			background: #FFF2E2;
			color: #FF9917;
		}

		&[type=green] {
			background: #E3F6ED;
			color: #0CB76C;
		}
	}

	.wrapper {
		display: grid;
		align-items: center;
		justify-content: center;
		height: 100%;

		.circular-button-group {
			display: grid;
			align-items: center;
			justify-content: center;
			margin-top: 30px;

			.circular-button {
				width: 100px;
				height: 100px;
				line-height: 100px;
				border-radius: 100%;
				text-align: center;
				margin-bottom: 60px;
				color: #FFFFFF;
				font-weight: 500;
				font-size: 20px;
			}

			.following {
				background: #FF9917;
			}

			.read {
				background: #0CB76C
			}

			.recite {
				background: #0287FD;
			}
		}
	}
</style>